<template>
  <el-main>
    <div class="content">
      <div class="left">
        <div class="l-top">
          <div class="today-caller">
            <div class="modality">
              <div class="title">今天访客</div>
              <div class="amount">
                <div class="num">456</div>
                <div class="person">/人</div>
              </div>
              <div class="change">
                <span>-20%</span>
              </div>
            </div>
          </div>
          <div class="ayer-caller">
            <div class="modality">
              <div class="title">昨日访客</div>
              <div class="amount">
                <div class="num">478</div>
                <div class="person">/人</div>
              </div>
              <div class="change">
                <span>-20%</span>
              </div>
            </div>
          </div>
          <div class="week-caller">
            <div class="modality">
              <div class="title">本周访客</div>
              <div class="amount">
                <div class="num">5543</div>
                <div class="person">/人</div>
              </div>
              <div class="change">
                <span>+20%</span>
              </div>
            </div>
          </div>
          <div class="month-caller">
            <div class="modality">
              <div class="title">本月访客</div>
              <div class="amount">
                <div class="num">23456</div>
                <div class="person">/人</div>
              </div>
              <div class="change">
                <span>+20%</span>
              </div>
            </div>
          </div>
        </div>
        <div class="l-middle">
          <div class="month-access-num">
            <div id="box1"></div>
          </div>
          <div class="week-access-num">
            <div id="box2"></div>
          </div>
        </div>
        <div class="l-bottom">
          <div class="year-access-num">
            <div id="box3"></div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="r-top">
          <div class="fast">
            <div class="modality1">
              <div class="title">快捷入口</div>
              <div class="amount">
                <div class="product">
                  <el-button
                    class="product-title"
                    type="text"
                    @click="dialogFormVisible = true"
                  >
                    添加产品 +
                  </el-button>
                  <el-dialog v-model="dialogFormVisible" title="添加 产品">
                    <el-form :model="form">
                      <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input
                          v-model="form.shopName"
                          autocomplete="off"
                          class="inputChange"
                          clearable
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="价格" :label-width="formLabelWidth">
                        <el-input-number
                          v-model="salesVolume"
                          :min="1"
                          :max="10"
                          class="inputChange1"
                          @change="handleChange"
                        />
                      </el-form-item>
                      <el-form-item label="描述" :label-width="formLabelWidth">
                        <el-input
                          v-model="form.shopMsg"
                          autosize
                          class="textarea1"
                          type="textarea"
                          placeholder="Please input"
                        />
                      </el-form-item>
                    </el-form>
                    <template #footer>
                      <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false"
                          >关闭</el-button
                        >
                        <el-button type="primary" @click="add">确定</el-button>
                      </span>
                    </template>
                  </el-dialog>
                </div>
              </div>
              <div class="change">
                <span>添加资讯 +</span>
                <span>添加广告 +</span>
              </div>
            </div>
          </div>
        </div>
        <div class="r-bottom">
          <div class="ranking">
            <div class="title">
              <span>产品排名</span>
              <div class="flex flex-wrap items-center">
                <el-dropdown>
                  <el-button type="primary">
                    <svg
                      class="icon"
                      width="30"
                      height="30"
                      viewBox="0 0 1024 1024"
                      xmlns="http://www.w3.org/2000/svg"
                      data-v-042ca774=""
                    >
                      <path
                        fill="currentColor"
                        d="M176 416a112 112 0 110 224 112 112 0 010-224zm336 0a112 112 0 110 224 112 112 0 010-224zm336 0a112 112 0 110 224 112 112 0 010-224z"
                      ></path>
                    </svg>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>热门产品</el-dropdown-item>
                      <el-dropdown-item>优惠活动</el-dropdown-item>
                      <el-dropdown-item>今日热销</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
            <div class="ranking-content">
              <ul>
                <li
                  v-for="item in contentList"
                  :key="item.shopId"
                  class="ranking-li"
                >
                  <div class="ranking-number">{{ item.shopId }}</div>
                  <div class="ranking-img">
                    <img :src="item.shopLogo" alt="" />
                  </div>
                  <div class="ranking-details">
                    <span>名称:{{ item.shopName }}</span>
                    <span>{{ item.shopMsg }}</span>
                    <span>价格:{{ item.salesVolume }}</span>
                    <span>购买人数:{{ item.number }}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-main>
</template>

<script>
import { computed, onMounted, ref, reactive } from "vue";
import * as echarts from "echarts";
import rankingList from "../../../mock/ranking-Data";

export default {
  setup() {
    // 主数据
    const list = ref([]);
    const lists = ref([]);
    const num = ref(1);

    // 获取数据
    onMounted(async () => {
      const res = await rankingList.getDate();
      list.value = res.rankingData.data;
      console.log(list.value);
    });

    const contentList = computed(() =>
      list.value.slice(num.value * 2 - 2, num.value * 2)
    );

    // 删除
    onMounted(async () => {
      const res = await rankingList.delete();
      if (res) {
        const res = await rankingList.getDate();
        lists.value = res.rankingData;
      }
    });

    onMounted(() => {
      var myChart = echarts.init(document.getElementById("box1"));
      var myChart1 = echarts.init(document.getElementById("box2"));
      var myChart2 = echarts.init(document.getElementById("box3"));

      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
        myChart1.resize();
        myChart2.resize();
      });

      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        legend: {
          top: 15,
          width: 600,
        },
        xAxis: [
          {
            type: "category",
            scale: true,
            axisTick: {
              alignWithLabel: true,
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "周访问量",
            min: 0,
            max: 10000,
            position: "right",
            scale: true,
            axisLabel: {
              formatter: "{value} 人",
            },
          },
          {
            type: "value",
            name: "月访问量",
            min: 0,
            max: 60000,
            position: "left",
            axisLabel: {
              formatter: "{value} 人",
            },
          },
        ],
        series: [
          {
            name: "周访问量",
            type: "line",
            radius: [25, 100],
            smooth: true,
            yAxisIndex: 0,
            data: [
              3000, 4500, 1200, 4000, 3700, 2000, 2100, 5000, 6100, 5500, 3300,
              4600,
            ],
          },
          {
            name: "月访问量",
            type: "line",
            smooth: true,
            yAxisIndex: 1,
            data: [
              35000, 30000, 20000, 45000, 39400, 19000, 23000, 50000, 51000,
              55000, 33000, 40000,
            ],
          },
        ],
      });

      myChart1.setOption({
        legend: {
          bottom: 15,
        },
        toolbox: {
          show: true,
          right: 20,
          top: 10,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 90],
            center: ["50%", "43%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 7,
            },
            data: [
              { value: 400, name: "周 1" },
              { value: 380, name: "周 2" },
              { value: 320, name: "周 3" },
              { value: 300, name: "周 4" },
              { value: 280, name: "周 5" },
              { value: 500, name: "周 6" },
              { value: 600, name: "周 7" },
            ],
          },
        ],
      });

      myChart2.setOption({
        legend: {
          top: 15,
        },
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: [
            ["product", "2016", "2017", "2018", "2019", "2020", "2021"],
            ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
          ],
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "35%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "10%",
            center: ["10%", "15%"],
            left: 20,
            top: 10,
            emphasis: {
              focus: "self",
            },
            label: {
              formatter: "{b}: {@2012} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2016",
              tooltip: "2016",
            },
          },
        ],
      });
    });

    const dialogFormVisible = ref(false);
    const formLabelWidth = "140px";
    const salesVolume = ref(1);
    const id = ref(3);

    // 添加产品的相关数据
    const form = reactive({
      shopName: "",
      salesVolume: "",
      shopMsg: "",
    });

    // 添加产品
    const add = () => {
      dialogFormVisible.value = false;
      const addList = ref({});
      addList.value.shopId = id.value++;
      addList.value.shopName = form.shopName;
      addList.value.salesVolume = salesVolume.value;
      addList.value.shopMsg = form.shopMsg;
      addList.value.number = Math.round(Math.random() * 80 + 20);
      addList.value.shopLogo =
        "http://dummyimage.com/100x40/c33/ffffff&text=茶";
      addList.value.value = 0;
      console.log(addList.value);
      contentList.value = contentList.value.push(addList.value);
    };

    return {
      list,
      num,
      contentList,
      dialogFormVisible,
      formLabelWidth,
      form,
      add,
      salesVolume,
      id,
    };
  },
};
</script>

<style lang="less" scoped>
// 中间内容
.el-main {
  box-sizing: content-box;
  text-align: center;
  padding: 0;
  margin-bottom: 20px;
  margin-right: 36px;
}
.content {
  height: 100%;
  display: flex;
  .modality {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 100%;
    .title {
      font-size: 24px;
    }
    .amount {
      display: flex;
      justify-content: center;
      align-items: center;
      .num {
        font-size: 48px;
      }
      .person {
        font-size: 15px;
        transform: translate(20%, 45%);
      }
    }
    .change {
      background: #a0b675;
      color: #fff;
      font-size: 18px;
      width: 35%;
      height: 15%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  // 右侧内容
  .left {
    width: 79.7%;
    .l-top {
      height: 25.8%;
      display: flex;
      justify-content: center;
      padding-bottom: 0.9%;
      .today-caller {
        width: 25.3%;
        background: #fff;
        border-radius: 25px;
        margin-right: 1.84%;
      }
      .ayer-caller {
        width: 24.7%;
        background: #fff;
        border-radius: 25px;
        margin-right: 2%;
      }
      .week-caller {
        width: 24.7%;
        background: #fff;
        border-radius: 25px;
        .change {
          background: #ff6f48;
        }
      }
      .month-caller {
        width: 25.3%;
        background: #fff;
        border-radius: 25px;
        margin-left: 1.84%;
        margin-right: 1.5%;
        .change {
          background: #ff6f48;
        }
      }
    }
    .l-middle {
      height: 40%;
      display: flex;
      justify-content: center;
      padding-top: 0.9%;
      padding-bottom: 0.9%;
      .month-access-num {
        width: 50%;
        background: #fff;
        border-radius: 25px;
        margin-right: 2%;
        padding: 20px;
        #box1 {
          width: 100%;
          height: 100%;
        }
      }
      .week-access-num {
        width: 50%;
        background: #fff;
        border-radius: 25px;
        margin-right: 1.5%;
        #box2 {
          width: 100%;
          height: 100%;
        }
      }
    }
    .l-bottom {
      height: 34.2%;
      display: flex;
      justify-content: center;
      padding-top: 0.9%;
      .year-access-num {
        width: 100%;
        background: #fff;
        border-radius: 25px;
        margin-right: 1.5%;
        #box3 {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  // 左侧内容
  .right {
    width: 20.3%;
    .r-top {
      display: flex;
      height: 25.8%;
      padding-bottom: 4.2%;
      .fast {
        width: 100%;
        background: #fff;
        border-radius: 25px;
        margin-left: 3%;
        .modality1 {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          height: 100%;
          width: 100%;
          .title {
            font-size: 24px;
          }
          .amount {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            width: 80%;
            height: 25%;
            .product {
              width: 100%;
              height: 100%;
              border: 1px solid #a9b093;
              border-radius: 5px;
              display: flex;
              justify-content: center;
              align-items: center;
              background: #e8f0db;
            }
            .product-title {
              font-size: 20px;
              color: #333;
            }
          }
          .change {
            color: #333;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80%;
            height: 20%;
            span {
              width: 50%;
              height: 100%;
              border: 1px solid #d9d6d7;
              border-radius: 5px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            span:nth-child(1) {
              margin-right: 5%;
            }
          }

          // 添加产品
          /deep/.inputChange {
            width: 50%;
          }
          /deep/.inputChange1 {
            width: 25%;
          }
          /deep/.textarea1 {
            width: 80%;
          }
        }
      }
    }
    .r-bottom {
      display: flex;
      height: 74.2%;
      padding-top: 4.2%;
      .ranking {
        width: 100%;
        background: #fff;
        border-radius: 25px;
        margin-left: 3%;
        padding: 26px 16px;
        overflow: hidden;
        .title {
          font-size: 24px;
          display: flex;
          justify-content: space-between;
          color: #333;
        }
        .el-button {
          background: #fff;
          color: #333;
          border: none;
        }
        // 排名内容
        .ranking-li {
          display: flex;
          justify-content: space-around;
          align-items: center;
          border: 1px solid #333;
          border-radius: 10px;
          height: 30%;
          width: 100%;
          padding: 0 5px;
          margin: 20px 0;
          background: #e8f0d8;
          .ranking-number {
            font-size: 20px;
          }
          .ranking-img {
            width: 128px;
            height: 128px;
            margin: 0 5px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .ranking-details {
            display: flex;
            flex-direction: column;
            width: 30%;
            span:nth-child(2) {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}
</style>
